// 首页
<template>
  <div id="home" class="clearfix">
    <headerBar>
      <div slot="home" class="home-header-bar">
        <router-link to>
          <Icon type="ios-mail-outline" size="30" color="#fff" class="f1 homeEmail" />
        </router-link>
        <span class="logo">
          天泉资讯
          <Icon type="ios-refresh" size="30" color="#fff" />
        </span>
        <router-link to="/search" class="search fr">
          <Icon type="ios-search" size="30" color="#fff" class="homeSearch"></Icon>
        </router-link>
      </div>
    </headerBar>
    <ul class="homeNav">
      <li v-for="(item,index) in navbar" :key="index" class="navBarLi">
        <router-link :to="{path:item.url,query:{type:item.type}}">{{item.text}}</router-link>
      </li>
    </ul>
    <div v-show="loading" v-loading="loading" element-loading-text="拼命加载中" style="width: 100%" class="loading"></div>
    <el-alert v-show="!ifReturnMsg" class="newsLoadError" title="暂无更新..." type="error" description="此频道暂无更新，请先休息一下！" show-icon></el-alert>
    <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
      <ul class="newsContent animated" v-show="!loading&&ifReturnMsg">
        <router-link
          v-for="(val,index) in listCon"
          :to="{
                    name:'newsdetail',
                    params:
                        {   id:val.tag_id,
                            title:val.title,
                            media_info:val.media_info,
                            media_name:val.media_name,
                            datetime:val.datetime,
                            abstract:val.abstract,
                            image_list:val.image_list,
                            repin_count:val.repin_count,
                            comment_count:val.comment_count,
                            keywords:val.keywords
                        }
                }"
          class="newsDetaile"
          :key="index"
        >
          <p class="title">{{val.title}}</p>
          <div>
            <img alt="加载出错" v-for="(img,index) in val.image_list" :key="index" v-lazy="img.url" />
            <div class="bottomInfo clearfix">
              <Icon type="fireball" size="10" color="#d43d3d" v-show="val.hot===1"></Icon>
              <span class="avIcon" v-show="val.label==='广告'">广告</span>
              <span class="writer">{{val.media_name}}</span> &nbsp;&nbsp;
              <span class="comment_count">评论&nbsp;{{val.comment_count}}</span>
              <span class="datetime">{{val.datetime|date}}</span>
            </div>
          </div>
        </router-link>
      </ul>
    </transition>
    <div
      class="pulldownload"
      v-show="downLoadMore"
      @click="pulldownloadmore({kind:first || $router.query.type,flag:downLoadMore})"
    >点击加载更多</div>
    <transition name="bounce" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <Back-top v-show="top" class="animated bounce">
        <div class="top">
          <Icon type="android-arrow-up"></Icon>
        </div>
      </Back-top>
    </transition>
    <bottomNav></bottomNav>
  </div>
</template>

<script>
import moment from "moment";
import headerBar from "../components/HeaderBar";
import bottomNav from "../components/BottomNav";
import * as type from "../store/mutation-types.js";
import { mapActions, mapGetters } from "vuex";
// import axios from "axios";
export default {
  data() {
    return {
      navbar: [
        {
          text: "推荐",
          url: "/home/all",
          type: "__all__"
        },
        {
          text: "热点",
          url: "/home/hot",
          type: "news_hot"
        },
        {
          text: "社会",
          url: "/home/society",
          type: "news_society"
        },
        {
          text: "娱乐",
          url: "/home/entertainment",
          type: "news_entertainment"
        },
        {
          text: "科技",
          url: "/home/tech",
          type: "news_tech"
        },
        {
          text: "汽车",
          url: "/home/car",
          type: "news_car"
        },
        {
          text: "体育",
          url: "/home/sports",
          type: "news_sports"
        },
        {
          text: "财经",
          url: "/home/finance",
          type: "news_finance"
        },
        {
          text: "军事",
          url: "/home/military",
          type: "news_military"
        },
        {
          text: "国际",
          url: "/home/world",
          type: "news_world"
        },
        {
          text: "时尚",
          url: "/home/fashion",
          type: "news_fashion"
        }
      ],
      top: false,
      first: window.location.search.substring(6)
    };
  },
  components: {
    headerBar,
    bottomNav
  },
  computed: {
    loading: {
      get() {
        return this.$store.state.loading;
      },
      set(val) {
        console.log(val);
      }
    },
    ...mapGetters([
      "newsList",
      // "loading",
      "list",
      "ifReturnMsg",
      "oneDetail",
      "routerChange",
      "downLoadMore"
    ]),
    listCon: function() {
      if (this.$route.query.type) {
        return this.list[this.$route.query.type];
      } else {
        return this.list[this.first];
      }
    }
  },
  // beforeRouteUpdate (to, from, next){
  //       this.$store.commit(type.PULLDOWNBTN, false);
  //       next();
  //   },
  methods: {
    ...mapActions(["getNews", "loading", "pulldownloadmore"]),
    handleScroll() {
      this.top = window.document.body.scrollTop > 400;
    }
  },
  mounted() {
    this.getNews({
      kind: this.first,
      flag: this.routerChange
    });
    this.loading = true;
    // const _this = this;
    window.addEventListener("scroll", this.handleScroll);
  },
  watch: {
    $route: function() {
      this.getNews({
        kind: this.$route.query.type,
        flag: this.routerChange
      });
      if (this.routerChange) {
        this.$store.commit(type.CHANGE_LOADING_STATE, true);
      } else {
        this.$store.commit(type.CHANGE_LOADING_STATE, false);
      }
      this.first = window.location.search.substring(6);
      this.$store.commit(type.ROUTERCHANGE, true);
    }
  },
  filters: {
    //过滤器
    date: input => {
      if (!input) {
        return "";
      }
      var time = moment(input)
        .startOf("minute")
        .fromNow();
      return time;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/transtion.scss";
@import "../assets/css/border.scss";
.home-header-bar {
  & > i {
    margin-top: 0.2rem;
  }
  .logo {
    color: #fff;
    font-size: 30px;
    i {
      vertical-align: middle;
    }
  }
  .homeEmail {
    margin-left: 0.22rem;
    float: left;
    line-height: 1.2rem;
  }
  .search {
    display: inline-block;
    .homeSearch {
      margin-right: -5.2rem;
      margin-top: 0.2rem;
    }
  }
}
.homeNav {
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  text-align: center;
  position: fixed;
  left: 0;
  font-size: 0;
  top: 1.2rem;
  background: #f4f5f6;
  font-family: "微软雅黑";
  white-space: nowrap;
  z-index: 999;
  .navBarLi {
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    width: 1.4rem;
    font-size: 25px;
    a {
      color: #000;
    }
    .router-link-active {
      color: #d43d3d;
      font-size: 25px;
      font-weight: bold;
    }
  }
}
::-webkit-scrollbar {
  display: none;
}
.newsContent {
  margin-top: 2.2rem;
  width: 100%;
  .newsDetaile {
    width: 94%;
    display: block;
    position: relative;
    margin: 0 auto;
    padding-bottom: 0.15rem;
    @include borderBottom(1px, #ccc);
    .title {
      font-size: 25px;
      font-weight: bold;
      color: #000;
      padding-top: 0.2rem;
      padding-bottom: 0.15rem;
    }
    img {
      width: 31.1%;
      margin-right: 0.21rem;
      height: 2.3rem;
    }
    .bottomInfo {
      font-size: 10px;
      margin-top: 0.15rem;
      .writer {
        color: #000;
      }
      .comment_count {
        color: #000;
      }
      .datetime {
        float: right;
        color: #000;
      }
      .avIcon {
        display: inline-block;
        height: 0.4rem;
        width: 0.9rem;
        text-align: center;
        line-height: 0.4rem;
        border-radius: 4px;
        border: 1px solid #39f;
        font-size: 10px;
        margin-right: 0.1rem;
      }
    }
  }
}
.loading {
  margin-top: 3.4rem;
}
.newsLoadError {
  margin: 2.3rem auto;
  font-size: 25px;
  width: 90%;
}
.pulldownload {
  margin-bottom: 1.3rem;
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #000;
  font-size: 18px;
  text-align: center;
}
.top {
  position: absolute;
  bottom: 2rem;
  right: 0.15rem;
  background: #d43d3d;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}
.pulldownbtn {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  top: 0.5rem;
  z-index: 1000000;
}
.ivu-icon-ios-email:before {
  content: "\F423";
}
.ivu-icon-ios-refresh-empty:before {
  content: "\F49A";
  color: #fff;
  background-color: #d43d3d;
}
</style>